<template>
  <div class="material-order-form">
    <el-card>
      <div slot="header">
        <h2>购买材料</h2>
      </div>

      <!-- 材料信息 -->
      <div class="material-info" v-if="material">
        <h3>{{ material.title }}</h3>
        <p class="price">价格: ¥{{ material.price }}</p>
        <p class="description">{{ material.description }}</p>
      </div>

      <el-divider></el-divider>

      <!-- 订单表单 -->
      <el-form 
        ref="orderForm" 
        :model="formData" 
        :rules="rules"
        label-width="100px"
        class="order-form"
      >
        <h3>客户信息</h3>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入电子邮箱"></el-input>
        </el-form-item>

        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入电话号码"></el-input>
        </el-form-item>

        <el-form-item label="地址" prop="address">
          <el-input 
            type="textarea" 
            v-model="formData.address" 
            placeholder="请输入地址"
            :rows="2"
          ></el-input>
        </el-form-item>

        <el-form-item label="公司名称" prop="company">
          <el-input v-model="formData.company" placeholder="请输入公司名称（如适用）"></el-input>
        </el-form-item>

        <el-form-item label="税号" prop="taxId">
          <el-input v-model="formData.taxId" placeholder="请输入税号（如需发票）"></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="notes">
          <el-input 
            type="textarea" 
            v-model="formData.notes" 
            placeholder="其他需要说明的事项"
            :rows="3"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button 
            type="primary" 
            :loading="loading"
            @click="submitOrder"
            class="submit-btn"
          >
            提交订单
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { createMaterialOrder } from '@/api/material';

export default {
  name: 'MaterialOrderForm',

  props: {
    material: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      loading: false,
      formData: {
        name: '',
        email: '',
        phone: '',
        address: '',
        company: '',
        taxId: '',
        notes: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的电子邮箱格式', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' }
        ]
      }
    };
  },

  methods: {
    async submitOrder() {
      try {
        await this.$refs.orderForm.validate();
        
        this.loading = true;
        const response = await createMaterialOrder({
          materialId: this.material.id,
          customerInfo: this.formData
        });

        this.$message.success('订单创建成功');
        
        // 跳转到支付页面
        this.$router.push(`/payment/material/${response.data.orderNumber}`);
      } catch (error) {
        if (error.message) {
          this.$message.error(error.message);
        }
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.material-order-form {
  max-width: 800px;
  margin: 20px auto;

  .material-info {
    margin-bottom: 20px;

    h3 {
      margin-bottom: 10px;
      color: #303133;
    }

    .price {
      font-size: 18px;
      color: #f56c6c;
      margin: 10px 0;
    }

    .description {
      color: #606266;
      line-height: 1.6;
    }
  }

  .order-form {
    margin-top: 20px;

    h3 {
      margin-bottom: 20px;
      color: #303133;
    }
  }

  .submit-btn {
    width: 100%;
    margin-top: 20px;
  }
}
</style>